<template>
    <div>
        <a-row>
            <a-row class='mytitle'>
                {{ $t('保护策略') }}
            </a-row>

            <NoAuthPage v-showNoAuth="'H1-1'" :imgBoxStyle="{ height: '85vh', margin: '10px' }" />
            <a-row v-userAuth="'H1-1'" style="margin:1em">
                <a-card hoverable>
                    <a-tabs :defaultActiveKey="defaultActiveKey" @change="tabsChange">
                        <a-tab-pane :tab="$t('文件系统定时快照')" key="file_snapshot">
                            <Snapshot ref="file_snapshotRef" />
                        </a-tab-pane>
                        <a-tab-pane :tab="$t('文件系统定时备份')" key="file_backup">
                            <Backup ref="file_backupRef" />
                        </a-tab-pane>
                        <a-tab-pane :tab="$t('块存储卷快照复制')" key="block_copy">
                            <Copy ref="block_copy" />
                        </a-tab-pane>
                    </a-tabs>
                </a-card>
            </a-row>
        </a-row>
    </div>
</template>

<script>
import EmptyData from '@/components/common/EmptyData'
import NoAuthPage from '@/components/common/NoAuthPage'
import Snapshot from './strategy/snapshot.vue'
import Backup from './strategy/backup.vue'
import Copy from './strategy/copy.vue'

export default {
    components: { EmptyData, NoAuthPage, Backup, Snapshot, Copy },
    data() {
        return {
            defaultActiveKey: 'file_snapshot',
            count: 0,
        }
    },
    created() {
        this.defaultActiveKey = localStorage.getItem('data_strategy') || 'file_snapshot'
    },
    methods: {
        tabsChange(key) {
            const ref = `${key}Ref`
            this.defaultActiveKey = key;
            localStorage.setItem('data_strategy', key);
            if (this.count !== 0) this.$nextTick(() => this.$refs[ref].getList())
            this.count++
        },
    }
}
</script>